<template>
  <div class="personnelSelection">
    <div class="sta_title">
      <div class="goBack" @click="save">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">选择成员</span>
      </div>
    </div>
    <div class="content">
      <div class="title">选择成员</div>
      <div class="selectDiv">
        <Select placeholder="请先选择部门" v-model="selectValue" style="width:200px" @on-change="selectChange">
          <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="personLists" v-if="selectValue != ''">
        <RadioGroup v-model="choosePersonIndex" vertical>
          <Radio :label="index" v-for="(item,index) in personList">
            <span>{{item.label}}</span>
            <div class="position">{{item.position}}</div>
          </Radio>
        </RadioGroup>
      </div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    name: "personnelSelection",
    props: ['personData'],
    data() {
      return {
        personList: [],
        choosePersonIndex: '',
        choosePersonList: [],
        selectValue: '',
        selectList: [],
      }
    },
    created() {
      let self = this
      self.getInfo()
    },
    methods: {
      save() {
        let self = this
        if (self.choosePersonIndex != '' && self.selectValue != '' || self.choosePersonIndex == 0 && self.selectValue != '') {
          let uid = cookie.get('uid')
          let unit_id = this.$route.query.id;
          if (!unit_id) {
            this.$Message.warning('无参数不能访问');
            return;
            //store.dispatch('setLoginStatus', 0)
            //window.location.reload()
          }
          this.$Loading.start();
          let str = {
            uid: uid,
            unit_id: unit_id,
            userid: self.personList[self.choosePersonIndex].value,
            type: self.personData
          }
          // console.log(str,'参数')
          var strdata = this.$twjsdes.enstr(str);
          this.$http.post(this.$API_URL + '/info/menberadd', {alldata: strdata.alldata}).then((response) => {
            var res = this.$twjsdes.decrypt(response.data.alldata);
            console.log(res,'接口返回值')
            self.$emit('save',null)
            this.$Loading.finish();
          }).catch(function (error) {
            this.$Modal.error({
              title: '提示',
              content: '网络连接错误，请检查后重试'
            });
            //console.log(error);
          });
        } else {
          console.log(222)
          self.$emit('save',null)
        }
      },
      getInfo(index){
        let self = this
        this.$Loading.start();
        let str = {
          uid: cookie.get('uid')
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/postchoice', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.selectList = res.data.item_list
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      selectChange(val) {
        let self = this
        this.$Loading.start();
        let str = {
          uid: cookie.get('uid'),
          department_id: val
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/userlist', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.personList = res.data.user_list
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    }
  }
</script>

<style scoped lang="less">
  .personnelSelection {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content{
      width: 100%;
      background: #f9f9f9;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      display: flex;
      flex-direction: column;
      .title{
        padding: 16px;
        box-sizing: border-box;
        font-size: 16px;
        color: #222222;
        border-bottom: 1px solid #e1e1e1;
        background: #fff;
      }
      .selectDiv{
        width: 100%;
        height: 50px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
      }
      .personLists{
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        .ivu-radio-group{
          background: #fff;
          .ivu-radio-wrapper{
            border-top: 1px solid #e1e1e1;
            height: 48px;
            line-height: 48px;
            padding: 0 16px;
            box-sizing: border-box;
            font-size: 14px;
            .position{
              float: right;
            }
          }
          .ivu-radio-wrapper:last-child{
            border-bottom: 1px solid #e1e1e1;
          }
        }
        .ivu-checkbox-group{
          display: flex;
          flex-direction: column;
          background: #fff;
          margin-bottom: 35px;
          .ivu-checkbox-group-item{
            border-top: 1px solid #e1e1e1;
            height: 48px;
            line-height: 48px;
            padding: 0 16px;
            box-sizing: border-box;
            font-size: 14px;
            .position{
              float: right;
            }
          }
          .ivu-checkbox-group-item:last-child{
            border-bottom: 1px solid #e1e1e1;
          }
        }
      }
    }
  }
</style>
